
<!doctype html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<script type="text/javascript" src="../jquery-2.1.1.js"></script>
	<title></title>
</head>
<body>

<div id="clickme">
  Click here
</div>
<ul id="book"  alt="" style="background:red;opacity:1;position: relative; left: 300px;width:200px;height:100px;display:inline;">

</ul>

<script type="text/javascript">
	

	// $('#clickme').click(function() {

		var book = $('#book');

		var i = 10
		while(i){
			book.append("<li>11</li>")
			i--;
		}

book.animate({
	// opacity: 0.25,
	left: '500'
	// height:'hide'
	// height: 'toggle'
}, {
	duration :2000,

	// specialEasing: {
	// 	left: 'linear'
	// },
	step: function(now, fx) {
		// console.log('step')
	},
	progress:function(){
		// console.log('progress')
	},
	complete:function(){
		console.log('动画完成')
	}
})




book.animate({
	left: '500'
}, {
	duration: 2000
})
		// book.animate({
		// 	opacity: 0.25,
		// 	left: '+=50'
		// 	// height: 'toggle'
		// }, {
		// 	duration :1000,
		// 	specialEasing: {
		// 		height: 'linear'
		// 	},
		// 	step: function(now, fx) {
		// 		var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
		// 		console.log(data)
		// 		// $('body').append('<div>' + data + '</div>');
		// 	},
		// 	progress:function(){
		// 		console.log('progress')
		// 	},
		// 	complete:function(){
		// 		console.log('动画完成')
		// 	}
		// }).animate({
		// 	opacity: 1,
		// 	left: '-=50'
		// 	// height: 'toggle'
		// }, {
		// 	duration :2000,
		// 	step: function(now, fx) {
		// 		var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
		// 		console.log(data)
		// 		// $('body').append('<div>' + data + '</div>');
		// 	},
		// 	progress:function(){
		// 		console.log('progress')
		// 	},
		// 	complete:function(){
		// 		console.log('动画完成')
		// 	}
		// })
	// });

</script>
</body>
</html>